<script setup>
import { ref, reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserData } from '@/api/user'
const tableData = ref([])
//获取会员数据
const getData =()=>{
    getUserData().then(res=>{
        console.log('返回来的会员数据:',res)
        tableData.value = res.data.data
    })
}
//当页面一加载完成调用的函数
onMounted(()=>{
    //请求表格中的数据
    getData()
})
const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(val)
}

const  dialogFormVisible = ref(false)
//编辑事件
const handleEdit = (index, row) => {
    console.log(index, row);
    //展示出对话框
    dialogFormVisible.value = true
    //回显数据
    form.id=row.id
    form.name=row.name
    form.phone=row.phone
    form.status=row.status
    form.sex=row.sex
}

//删除实际爱你 
const handleDelete = (index, row) => {
    console.log(index, row);
    ElMessageBox.confirm('此操作将永久删除会员码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        //todo 调用后端删除接口
        ElMessage({
            type: 'success',
            message: '删除成功!'
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
//定义会员编辑的表单绑定数据
const  form  = reactive({
    id: '',
    name: '',
    phone: '',
    sex: '男',
    status: '正常',
})

//编辑表单的提交和取消
const  handleAdd=()=>{
  console.log("提交表单",form)
  //todo 调用后端接口提交要修改的数据
}
const handleCancel=()=>{ 
    dialogFormVisible.value=false
}
</script>

<template>
    <!-- <h1>会员管理</h1> -->
    <div class="div-header">
        <el-button type="primary">添加会员</el-button>
        <el-button type="danger">删除所有</el-button>
    </div>
    <div class="table-container">
        <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" border
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="status" label="状态" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>
    <!-- 会员编辑的dialog -->
    <el-dialog title="会员编辑" v-model="dialogFormVisible" width="30%">
        <el-form ref="formRef" :model="form" label-width="80px">
            <el-form-item label="会员姓名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="会员手机">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio value="男">男</el-radio>
                    <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleAdd">保存</el-button>
                <el-button @click="handleCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<style scoped>

.table-container {
    margin-top: 20px;
}
</style>
